<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>全球新型冠状病毒实时数据统计</title>
    <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body style="background: lightskyblue">
    <div class="container" style="background: white; min-height: 700px;">
        <div class="row ">
            <div class="col-md-12">
                <div style="height: 160px;text-align: center;">
                    <h1 style="padding-top: 25px;margin-bottom: 40px"><b>全球新型冠状病毒实时数据统计</b></h1>
                    <form method="get" action="/query" style="width: 100%">
                        <div class="row">
                            <div class="col-md-4"></div>
                            <div class="input-group col-md-4">
                                    <input type="text" name="keyword" class="form-control" placeholder="Search for..." />
                                    <span class="input-group-btn">
                                        <button class="btn btn-success" type="submit">Go!</button>
                                    </span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <hr>
        <!-- table start -->
        <div class="row" style="margin-top: 30px">
            <div class="col-md-2">
                <div style="border: 2px solid forestgreen; padding: 10px; margin-top: 10px;margin-right: 5px;" class="align-content-center">
                    <label><h3 style="color: green; font: 20px">Total Data</h3></label>
                    <label> 确诊: <span th:text="${totallist.get(0)}"></span></label>
                    <label> 死亡: <span th:text="${totallist.get(1)}"></span></label>
                    <label> 恢复: <span th:text="${totallist.get(2)}"></span></label>
                </div>
            </div>
            <div class="col-md-8">
                <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th> # </th>
                        <th> Province/State </th>
                        <th> Country/Region </th>
                        <th> LatestTotalCases </th>
                        <th> DiffFromPrevDay </th>
                        <th> DeathsTotalCases </th>
                        <th> RecoveredTotalCases</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="data,dataStat:${datalist}">
                        <td th:text="${dataStat.index}"></td>
                        <td th:text="${data.state}"></td>
                        <td th:text="${data.country}"></td>
                        <td th:text="${data.latestTotalCases}"></td>
                        <td th:text="${data.diffFromPrevDay}"></td>
                        <td th:text="${data.deathsTotalCases}"></td>
                        <td th:text="${data.recoveredTotalCases}"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
<script src="assets/plugins/jquery/jquery.min.js" ></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" ></script>
</body>
</html>